<template>
  <el-row :gutter="0" class="container">
    <el-col :span="5" :offset="0">
      <a :href="getFullPath('/#/shop')">
        <img
          class="mi-logo"
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png"
          alt="xiaomi-logo"
          loading="lazy"
        />
      </a>
    </el-col>
    <el-col :span="12" :offset="0">
      <ul class="nav-list">
        <li
          class="nav-item"
          @mouseenter="
            showGoodList(nav.category);
            $event.stopPropagation();
          "
          @mouseleave="hideGoodList()"
          v-for="nav in navList"
          :key="nav.id"
          @click="
            openTarget(nav.targetUrl);
            $event.stopPropagation();
          "
        >
          {{ nav.name }}
          <div
            class="good-list-container show-good-list"
            v-for="line of goodList"
            :key="line.id"
            :style="{
              display: currentCategory === line.category ? 'block' : 'none',
            }"
          >
            <ul class="good-list">
              <li
                class="good-list-item"
                v-for="good of line.goods"
                :key="good.id"
              >
                <a
                  @click="
                    openDetail(line.category, good.id);
                    $event.stopPropagation();
                  "
                  class="good-link"
                >
                  <img class="good-image" :src="good.image" loading="lazy" />
                  <div class="good-name">{{ good.name }}</div>
                  <div class="good-price">{{ good.price }}元起</div>
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </el-col>
    <el-col :span="7" :offset="0">
      <div class="search-box">
        <input
          :placeholder="placeholder"
          class="search-input"
          type="text"
          :class="{ 'border-active': dropMenuDisplay }"
          @input="searchGoods($event)"
          @focus.stop="dropMenuDisplay = true"
          @blur.stop="handleBlur()"
        />
        <ul
          class="search-drop-menu"
          :class="{
            'border-active': dropMenuDisplay,
            'search-drop-menu-active': dropMenuDisplay,
          }"
        >
          <a
            v-for="(line, index) of keywords"
            :key="index"
            class="drop-menu-option"
            :href="'https://www.mi.com/shop/search?keyword=' + line"
          >
            <li>{{ line }}</li>
          </a>
        </ul>
        <div
          @click="submitSearch()"
          class="search-btn"
          :class="{ 'border-active': dropMenuDisplay }"
        >
          <el-icon style="vertical-align: middle">
            <Search />
          </el-icon>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted, ref, reactive } from "vue";
  import { useRouter } from "vue-router";
  import { GoodList, NavList } from "../../../types/Shop";
  import httpClient from "../../../utils/http";
  import { getFullPath } from "@/utils/path";

  let interval = ref<ReturnType<typeof setInterval>>();

  // prettier-ignore
  const mockKeywords = ["打印机","小米手环9","门锁","热水器","晾衣架","充电宝","显示器","路由器","手机换新"];

  const mockGoodList: GoodList[] = [
    {
      id: 1,
      category: "phone",
      goods: [
        {
          id: 1,
          name: "xiaomi 15",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=240&h=240&f=webp&q=90",
          price: 4999,
        },
        {
          id: 2,
          name: "xiaomi 15 Pro",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=240&h=240&f=webp&q=90",
          price: 5299,
        },
        {
          id: 3,
          name: "xiaomi 15 定制版",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b17e107bd68b683c92e2245715bb7e54.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 4999,
        },
        {
          id: 4,
          name: "Xiaomi MIX Fold 4",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a8fec02d8edf2bc5d1ed975823465c6.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 8999,
        },
        {
          id: 5,
          name: "Xiaomi MIX Flip",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/851b0039398ebce5909ef54360b03d1a.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 5999,
        },
        {
          id: 6,
          name: "Xiaomi Civi 4 Pro",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0dce5029e2367f3e70cd786cb192d04a.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 2799,
        },
      ],
    },
    {
      id: 2,
      category: "redmi-phone",
      goods: [
        {
          id: 1,
          name: "REDMI K80",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5f9da01e805c1d61c650bc27b754f173.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 2499,
        },
        {
          id: 2,
          name: "Redmi Note 14 Pro+",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa1b75b14fd41a5e1d98d25cbe6a1a89.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 5299,
        },
        {
          id: 3,
          name: "Redmi Note 14 Pro+",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/106529ca2a44569b3955198ac43b525b.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1399,
        },
        {
          id: 4,
          name: "Xiaomi MIX Fold 4",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a8fec02d8edf2bc5d1ed975823465c6.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1399,
        },
        {
          id: 5,
          name: "Redmi Note 14 5G",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8681c417e99e914fdb10fe9657ee7f08.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1099,
        },
        {
          id: 6,
          name: "Redmi K70 至尊版",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/409a54fc25b3a2f76790b045bed30a44.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 2599,
        },
      ],
    },
    {
      id: 3,
      category: "tv",
      goods: [
        {
          id: 1,
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3e9eafd588b3994ec7f370379ecd2f4.jpg?thumb=1&w=320&h=220&f=webp&q=90",
          name: "小米电视S Pro Mini LED系列",
          price: 4999,
        },
        {
          id: 2,
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/300ebd5f0fa66a25a52da567134db676.png?thumb=1&w=320&h=220&f=webp&q=90",
          name: "小米电视 S Mini LED 系列",
          price: 2999,
        },
        {
          id: 3,
          name: "Redmi 智能电视 X 2025款",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/81ae6882d5145e6b823b6c09040f7722.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 2599,
        },
        {
          id: 4,
          name: "Redmi 电视MAX系列",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a32280bcf272b9ee7cc03f01ff921db0.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 4999,
        },
        {
          id: 5,
          name: "Redmi A系列电视 2025款",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bdbe7f972404bbdac0dea1330b4f3677.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 799,
        },
        {
          id: 6,
          name: "Redmi智能电视 A Pro系列",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e6b48d86726615297be7fa3c58164ceb.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1599,
        },
      ],
    },
    {
      id: 4,
      category: "computer",
      goods: [
        {
          id: 1,
          name: "Redmi G Pro 游戏本 2024",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3a5d8336e401924d82e77c105bc90b8d.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 8499,
        },
        {
          id: 2,
          name: "Redmi Book Pro 14 2024",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3442ea8432af37766b3a1f900348469.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 4999,
        },
        {
          id: 3,
          name: "Redmi Book Pro 16 2024",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1f6a20434940961e37aa3ab8f956217.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 6999,
        },
        {
          id: 4,
          name: "Redmi Book 16 2024",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f6c0ada0b42c98348d0c222c6e3a844.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 3699,
        },
        {
          id: 5,
          name: "Redmi Book 14 2024",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/998fe69710528d4744a50ded67ec05ef.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 4299,
        },
        {
          id: 6,
          name: "Redmi Book Pro 15 2023 锐龙版",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/be052059c621f4a2d2ad605d8dabe879.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 5299,
        },
      ],
    },
    {
      id: 5,
      category: "home",
      goods: [
        {
          id: 1,
          name: "米家冰箱对开门610L墨羽岩",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/531efbd4fd88b64a94079436851f56f1.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1999,
        },
        {
          id: 2,
          name: "米家冰箱 对开门536L 墨羽岩",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52c8cab6760eadd9e01871dfbf27817f.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1999,
        },
        {
          id: 3,
          name: "新风空调 立式3匹",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/950767dbf6e63b853d39d413e97685a8.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 5999,
        },
        {
          id: 4,
          name: "小米空调 1.5匹新1级能效",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/80416c1c7040aabbafa527a6ea652948.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 2299,
        },
        {
          id: 5,
          name: "米家洗烘一体机 12kg",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85009f514f7505825899635daeb761b0.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 799,
        },
        {
          id: 6,
          name: "米家冰柜 203L",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3b6361cf5069af62f4208ee326bd0e43.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 799,
        },
      ],
    },
    {
      id: 6,
      category: "router",
      goods: [
        {
          id: 1,
          name: "Xiaomi路由器AX3000T",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b5de7ae24c438974939453553420f1a0.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 159,
        },
        {
          id: 2,
          name: "Xiaomi全屋路由 BE3600Pro 套装",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f6ae2a9be0012e6ee477b6aed44c88a3.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 699,
        },
        {
          id: 3,
          name: "Xiaomi路由器 BE3600",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a8cc8ccb1c0e8cc58d96b7ec00df6634.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 229,
        },
        {
          id: 4,
          name: "Xiaomi路由器 BE6500 Pro",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2e4e053bd4dd41341ce8950ae1c3896d.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 649,
        },
        {
          id: 5,
          name: "Xiaomi路由器 BE5000",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/81f833a72b840274af1cf5931fb516f8.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 279,
        },
        {
          id: 6,
          name: "小米路由器",
          image:
            "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2ddc6a2789c5f5ff78fa4ca1402417c8.png?thumb=1&w=320&h=220",
          price: 399,
        },
      ],
    },
  ];

  const mockNavList: NavList[] = [
    {
      id: 1,
      name: "Xiaomi手机",
      category: "phone",
    },
    {
      id: 2,
      name: "REDMI手机",
      category: "redmi-phone",
    },
    {
      id: 3,
      name: "电视",
      category: "tv",
    },
    {
      id: 4,
      name: "笔记本",
      category: "computer",
    },
    {
      id: 5,
      name: "家电",
      category: "home",
    },
    {
      id: 6,
      name: "路由器",
      category: "router",
    },
    {
      id: 7,
      name: "服务中心",
      targetUrl: "https://www.mi.com/service",
    },
    {
      id: 8,
      name: "社区",
      targetUrl: "https://www.xiaomi.cn/",
    },
  ];
  const placeholder = ref("小米手机");
  const dropMenuDisplay = ref(false);
  const keywords = reactive<string[]>([]);
  const navList = reactive<NavList[]>([]);
  let timer: ReturnType<typeof setInterval>;
  const router = useRouter();

  const currentCategory = ref<NavList["category"]>("");

  let goodList = reactive<GoodList[]>([]);

  // 显示商品列表
  const showGoodList = (category: NavList["category"]) => {
    clearInterval(timer);
    if (category) {
      currentCategory.value = category;
    }
  };

  // 隐藏商品列表，使用延时函数防止频繁触发
  const hideGoodList = () => {
    timer = setInterval(() => {
      currentCategory.value = "";
    }, 500);
  };

  const showKeywords = () => {
    const index = Math.floor(Math.random() * keywords.length);
    placeholder.value = keywords[index];
  };

  // 发送请求检索数据
  const searchGoods = (e: Event) => {
    const target = e.target as HTMLInputElement;
    // 模拟检索数据
    if (target.value.length > 5) {
      keywords.unshift(target.value);
    }
  };

  // 提交数据
  const submitSearch = () => {
    window.location.replace(
      `https://www.mi.com/shop/search?keyword=${placeholder.value}`
    );
  };

  // 打开url
  const openTarget = (url: NavList["targetUrl"]): void => {
    if (url) {
      window.location.replace(url);
    }
  };

  // 延迟隐藏 dropmenu
  const handleBlur = () => {
    clearInterval(timer);
    timer = setInterval(() => {
      dropMenuDisplay.value = false;
    }, 500);
  };

  // 打开商品明细
  const openDetail = (category: GoodList["category"], goodId: number) => {
    router.push(`/shop/buy/detail/${category}/${goodId}`);
  };

  onMounted(() => {
    keywords.push(...mockKeywords);
    navList.push(...mockNavList);
    Object.assign(goodList, mockGoodList);

    // 模拟请求
    httpClient.get("shop/goodList").then((res) => {
      if (res.data.data.code === 200) {
        // 合并数据
        Object.assign(goodList, res.data.data.goodList);
        keywords.push(...res.data.data.keywords);
        navList.push(...res.data.data.navList);
      }
    });

    interval.value = setInterval(() => {
      showKeywords();
    }, 6000);
  });

  onUnmounted(() => {
    if (interval) {
      clearInterval(interval.value);
    }
  });
</script>

<style lang="scss" scoped>
  @use "@/styles/variable" as *;

  .container {
    width: 1440px;
    margin-right: auto;
    margin-left: auto;
  }

  .mi-logo {
    width: 56px;
    height: 56px;
    margin: 20px 100px;
  }

  .nav-list {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
    min-height: 88px;
  }

  .nav-item {
    display: block;
    color: $bsGray;
    font: $bsFont;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0px 10px;
    height: 90px;
    line-height: 95px;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;

    &:hover {
      color: $themeColor;
    }
  }

  .search-box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: start;
    align-items: center;
    height: 50px;
    margin: 20px 100px 0px 20px;
    position: relative;

    .search-input,
    .search-btn {
      outline: 0;
      width: 243px;
      height: 48px;
      padding: 0 10px;
      font-size: 14px;
      line-height: 45px;
      border: 1px solid #e0e0e0;
      --webkit-transition: color 0.2s;
    }

    .search-btn {
      width: 52px;
      text-align: center;
      font-size: 18px !important;
      cursor: pointer;
    }

    .border-active {
      border: 1px solid $themeColor !important;
    }
  }

  .search-drop-menu {
    position: absolute;
    left: 0;
    top: 48px;
    z-index: 20;
    width: 243px;
    border-top: 0;
    background: $bsWhite;
    display: none;

    .drop-menu-option {
      list-style: none;
      cursor: pointer;
      text-decoration: none;

      li {
        font: $bsFont;
        font-size: 12.5px;
        color: $bsGray;
        text-decoration: none;
        padding: 6px 0px;
        text-indent: 10px;

        &:hover {
          background: #f5f5f5;
        }
      }
    }
  }

  .search-drop-menu-active {
    display: block !important;
  }

  .good-list-container {
    width: 100%;
    top: 290;
    left: 0;
    position: absolute;
    z-index: 200;
    min-height: 200px;
    background-color: $bsWhite;
    animation-fill-mode: forwards; /* 动画结束后保持最后一帧 */
    animation-duration: 0.5s;
  }

  .good-list {
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
  }

  .good-list-item {
    list-style: none;
    padding: 30px;
    border-left: 1px solid #e0e0e0;

    &:first-child {
      border-left: none;
    }

    &:last-child {
      border-right: none;
    }
  }

  .good-link {
    text-decoration: none;
    font: $bsFont;
    text-align: center;
  }

  .good-image {
    width: 160px;
    height: 100px;
    object-fit: contain;
  }

  .good-name {
    color: $bsGray;
  }

  .good-price {
    color: $themeColor;
  }

  .show-good-list {
    animation-name: fadeInSlideDown;
  }

  @keyframes fadeInSlideDown {
    from {
      opacity: 0;
      transform: translateY(-45px); /* 初始位置向上偏移 */
    }
    to {
      opacity: 1;
      transform: translateY(0); /* 最终位置 */
    }
  }
</style>
